<template>
	<view>
		<u-row>
			<u-col span="12">
				<view>
					<u-search placeholder="请输入书籍名称" :clearabled="true" v-model="searchBook.bookName" @custom="search()"
						@search="search()"></u-search>
				</view>
			</u-col>
		</u-row>
		<u-row customStyle="margin-bottom: 10px">
			<u-col span="6">
				<u-button type="info" @click="getAllBooks()">获取所有书籍信息</u-button>
			</u-col>
			<u-col span="6">
				<u-button type="info" @click="openDialog(0, null, null)">添加书籍</u-button>
			</u-col>
		</u-row>
		<u-row v-if="books != null" customStyle="margin-bottom: 10px">
			<u-col span="1" textAlign="center">
				<view>ID</view>
			</u-col>
			<u-col span="7" textAlign="center">
				<view>书籍名称</view>
			</u-col>
			<u-col span="2" textAlign="center">
				<view>价格</view>
			</u-col>
			<u-col span="2" textAlign="center">
				<view>操作</view>
			</u-col>
		</u-row>
		<view v-for="book, index in books" :key="index">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1" textAlign="center">
					<view>{{book.bookId}}</view>
				</u-col>
				<u-col span="7" textAlign="center">
					<view>{{book.bookName}}</view>
				</u-col>
				<u-col span="2" textAlign="center">
					<view>{{book.bookPrice}}</view>
				</u-col>
				<u-col span="2" textAlign="center">
					<view>
						<u-button size="mini" type="warning" @click="openDialog(1, book, index)">修改</u-button>
						<u-button size="mini" type="error" @click="openDialog(2, book, index)">删除</u-button>
					</view>
				</u-col>
			</u-row>
		</view>
		<view v-if="books != null">
			<u-row>
				<u-col span="2" textAlign="center">
					<view>
						<u-button type="primary" :disabled="current==1" icon="arrow-left"
							@click="getBooksByPage(--current, size, searchBook)"></u-button>
					</view>
				</u-col>
				<u-col span="2" textAlign="center">
					<view>
						<u--text align="right" type="info" :text="page.current-1==0?'首页':page.current-1"></u--text>
					</view>
				</u-col>
				<u-col span="4" textAlign="center">
					<view>
						<u--text align="center" type="primary" :text="page.current"></u--text>
					</view>
				</u-col>
				<u-col span="2" textAlign="center">
					<view>
						<u--text align="left" type="info" :text="page.current==page.pages?'到底啦':page.current+1">
						</u--text>
					</view>
				</u-col>
				<u-col span="2" textAlign="center">
					<view>
						<u-button type="primary" :disabled="current==page.pages" icon="arrow-right"
							@click="getBooksByPage(++current, size, searchBook)"></u-button>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="show" showConfirmButton showCancelButton buttonReverse @confirm="confirm()"
			@cancel="cancelDialog()">
			<view class="slot-content">
				<u-row customStyle="margin-bottom: 10px">
					<u--text align="center" type="info" :text="type==0?'添加书籍':type==1?'修改书籍':'删除书籍'"></u--text>
				</u-row>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="4" textAlign="center">
						<u--text align="center" text="书籍名称"></u--text>
					</u-col>
					<u-col span="8" textAlign="center">
						<u--input :disabled="this.type==2" placeholder="请输入书籍名称" border="surround"
							v-model="book.bookName">
						</u--input>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="4" textAlign="center">
						<u--text align="center" text="书籍价格"></u--text>
					</u-col>
					<u-col span="8" textAlign="center">
						<u--input :disabled="this.type==2" placeholder="请输入书籍价格" border="surround"
							v-model="book.bookPrice">
						</u--input>
					</u-col>
				</u-row>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				books: null,
				page: {},
				current: 1,
				size: 5,
				searchBook: {},
				book: {},
				index: null,
				show: false,
				// type 0:add 1:modify 2:delete 
				type: null
			}
		},
		methods: {
			search() {
				if (this.searchBook.bookName != undefined && this.searchBook.bookName != '') {
					this.getBooksByPage(this.current, this.size, this.searchBook);
				}
			},
			getAllBooks() {
				this.searchBook.bookName = null;
				this.getBooksByPage(this.current, this.size, this.searchBook);
			},
			getBooksByPage(current, size, book) {
				var params = {
					current: current,
					size: size,
				}
				if (book.bookName != undefined && book.bookName != null) {
					params.bookName = book.bookName;
				}
				uni.$u.http.get('/book/getBooksByPage', {
					params
				}).then(res => {
					this.books = res.records;
					this.page = res;
					this.showToast("success");
				}).catch(err => {
					this.showToast("error")
					console.log(err);
				})
			},
			openDialog(type, book, index) {
				// type 0:add 1:modify 2:delete 
				switch (type) {
					case 0:
						this.type = 0;
						this.book = {};
						break;
					case 1:
						this.type = 1;
						this.book.bookId = book.bookId;
						this.book.bookName = book.bookName;
						this.book.bookPrice = book.bookPrice;
						this.index = index;
						break
					case 2:
						this.type = 2;
						this.book.bookId = book.bookId;
						this.book.bookName = book.bookName;
						this.book.bookPrice = book.bookPrice;
						this.index = index;
						break
				}
				this.show = true;
			},
			cancelDialog() {
				this.show = false;
				setTimeout(() => {
					this.book = {};
				}, 300);
			},
			confirm() {
				switch (this.type) {
					// type 0:add 1:modify 2:delete 
					case 0:
						if (this.book.bookName != undefined && this.book.bookName != null && this.book.bookName != '' &&
							this.book.bookPrice != undefined && this.book.bookPrice != null && this.book.bookPrice != '') {
							uni.$u.http.post('/book/addBook', {
								bookName: this.book.bookName,
								bookPrice: this.book.bookPrice
							}).then(res => {
								this.showToast("success");
								this.book = {}
								this.getAllBooks();
							}).catch(err => {
								this.showToast("error")
								console.log(err);
							})
							this.cancelDialog();
						}
						break;
					case 1:
						if (this.book.bookName != undefined && this.book.bookName != null && this.book.bookName != '' &&
							this.book.bookPrice != undefined && this.book.bookPrice != null && this.book.bookPrice != '') {
							uni.$u.http.post('/book/modifyBook', {
								bookId: this.book.bookId,
								bookName: this.book.bookName,
								bookPrice: this.book.bookPrice
							}).then(res => {
								this.showToast("success");
								this.books[this.index] = this.book;
								this.book = {};
							}).catch(err => {
								this.showToast("error")
								console.log(err);
							})
							this.cancelDialog();
						}
						break
					case 2:
						uni.$u.http.get('/book/deleteBookById', {
							params: {
								bookId: this.book.bookId
							}
						}).then(res => {
							this.books.splice(this.index, 1);
							this.showToast("success")
						}).catch(err => {
							this.showToast("error")
							console.log(err);
						})
						this.cancelDialog();
						break
				}
			},
			showToast(type, msg) {
				this.$refs.uToast.show({
					type: type,
					message: msg,
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/' + type + '.png'
				})
			}
		}
	}
</script>

<style>

</style>
